<template>
  <div class="logo">
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple left_tb">
          <div class="left_font_yx fl"></div>
          <div class="left_img_lpl fl"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light right_tb">
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple left_bn">
                <div class="search-box">
                  <input type="text" class="inp" @focus="noneText" @blur="playText" v-model="text"/>
                  <a href="#" class="searchbth"></a>
                  <a href class="lpl">LPL</a>
                </div>
              </div>
            </el-col>
            <el-col :span="12" class="ringht_log">
              <div class="grid-content bg-purple-light">
                <div class="bg_tx fl">
                  <img src="../../images/default.png" alt />
                </div>
                <span class="fl">
                  亲爱的召唤师，请
                  <a href="#">登录</a>
                </span>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data: () => ({
    text: null
  }),
  created () {},
  methods: {
    noneText () {
      let lpl = document.getElementsByClassName('lpl')[0]
      lpl.style.display = 'none'
    },
    playText () {
      if (!this.text) {
        let lpl = document.getElementsByClassName('lpl')[0]
        lpl.style.display = 'block'
      }
    }
  }
}
</script>
<style lang="less" scoped>
.logo {
  background: #000;
  padding-bottom: 10px;
  .left_tb {
    .left_font_yx {
      height: 58px;
      width: 156px;
      background: url("../../images/logo.jpg");
      margin: 11px 10px 0 30px;
    }
    .left_img_lpl {
      height: 58px;
      width: 62px;
      background: url("../../images/logo.jpg");
      background-position: -174px 0;
      margin: 11px 10px 0 0;
    }
  }

  .right_tb {
    background: #000;
    .bg_tx {
      position: relative;
      width: 50px;
      height: 50px;
      background: url("../../images/comm1901.png");
      background-position: center;
      background-position: -59px 0;
      position: relative;
      overflow: hidden;
      z-index: 20;
      margin-left: 60px;
      img {
        position: absolute;
        height: 34px;
        width: 34px;
        border-radius: 50%;
        display: block;
        margin: 7px 0 0 6px !important;
      }
    }
    .left_bn {
      float: right;
    }
    .ringht_log {
      margin-top: 15px;
      line-height: 50px;
      float: right;
      color: #fff;
      a {
        color: #cea04a;
      }
    }
  }
  .search-box {
    position: relative;
    background-color: #3b3b3b;
    width: 237px;
    height: 32px;
    margin: 25px 0 0 0;
    border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    background-image: none;
    .lpl {
      position: absolute;
      top: 8px;
      left: 22px;
      color:#cea04a;
      text-decoration: underline;
    }

    .inp {
      outline: 0;
      width: 229px;
      height: 34px;
      margin-left: 4px;
      line-height: 32px;
      box-sizing: border-box;
      padding: 0 20px;
      color: #c49f58;
      font-size: 14px;
      background: 0 0;
      border: none;
    }
    .searchbth {
      display: block;
      width: 50px;
      height: 32px;
      position: absolute;
      right: 0;
      top: 0;
      background: url(../../images/icon-search.png) no-repeat center center;
    }
  }
}
</style>
